<template>
    <div>
        <el-row class="pt20">

            <el-form ref="form" :model="formInline" label-width="80px" class="demo-form-inline">
                <el-row>
                    <el-col :span="2">
                        <pers-button type="primary" @click="add()" perms="kanke:education:gradeclass:add-student" label="添加学员"></pers-button>
                    </el-col>
                    <el-col :span="2" v-if="isShow(['kanke:education:gradeclass:student-batch-remove','kanke:education:gradeclass:student-batch-change'])">
                        <el-form-item label="">
                            <el-select v-model="formInline.operType" placeholder="批量操作" clearable filterable >
                                <el-option label="批量移出" value="1" @click.native="handleClickSelect(1)" v-if="hasPermission('kanke:education:gradeclass:student-batch-remove')"></el-option>
                                <el-option label="批量换班" value="2" @click.native="handleClickSelect(2)" v-if="hasPermission('kanke:education:gradeclass:student-batch-change')"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-input style="width: 220px;margin-left: 251px;" placeholder="请输入学员名称" v-model="formInline.realname" clearable>
                            <i slot="suffix" class="el-input__icon el-icon-search" style="font-size:20px;font-weight: bold;" @click="search"></i>
                        </el-input>
                    </el-col>
                    <el-col :span="18">
                    </el-col>
                </el-row>
            </el-form>
            
        </el-row>
        <el-table ref="multipleTable" :data="tableData" style="margin-bottom: 20px;"
                  @selection-change="handleSelectionChange"
                  row-key="id" border stripe default-expand-all
                  v-loading="loading">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column prop="nickname" align="center" label="学员姓名">
                <template slot-scope="scope">
                    <el-button type="text" v-if="hasPermission('kanke:education:gradeclass:student-detail')"
                                @click="handleDetail(scope.row)">{{scope.row.nickname}}
                    </el-button>
                    <el-button type="text" v-else>{{scope.row.nickname}}</el-button>
                </template>

            </el-table-column>
            <el-table-column prop="account" align="center" label="学员账号"></el-table-column>
            <el-table-column prop="end_days" align="center" label="到期天数">
                <template slot-scope="scope">
                    {{ getEndStatus(scope.row.end_date)}}
                </template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
            </el-table-column>
            <el-table-column prop="handle" align="center" fixed="right" width="120" label="操作" v-if="isShow(['kanke:education:gradeclass:student-change','kanke:education:gradeclass:student-remove'])">
                <template slot-scope="scope">
                    <PersButton type="text" perms="kanke:education:gradeclass:student-change" label="换班" @click="handleShift(scope.row)">
                    </PersButton>
                    <PersButton type="text" perms="kanke:education:gradeclass:student-remove" label="移出" @click="handleRemove(scope.row)">
                    </PersButton>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <ShiftClass :visible.sync="showShift" @handleReload="init()" :id="shiftId" :userType="userType" :class_id="class_id"/>
        <AddStudent v-if="showAddStudent" :visible.sync="showAddStudent" @handleReload="init()" :class_id="class_id" :ids="ids"/>
    </div>
</template>

<script>
import {hasPermission, isShow} from '@/common/permission';
import { getStudentList, deleteStudent } from '@/api/kanke/student'
import { resetPwd } from '@/api/kanke/user'

import {getClassData, studentRemove} from '@/api/kanke/gradeclass/gradeclass'
import { EXPIRE_STATUS_LIST, EXPIRE_STATUS_MAP } from '@/constant/kanke/student'
import { pageSizes } from '@/constant/index';
import { getEndStatus } from '@/common/common';
import ShiftClass from './ShiftClass';

import AddStudent from "@/views/kanke/education/gradeclass/components/AddStudent";
import PersButton from '../../../../../components/PersButton.vue'
export default {
    name: "KanKeStudentList",
    components: {
        AddStudent,
        ShiftClass,
        PersButton
    },
    props: {
        class_id: {
            // type: Number,
            default: 0
        }
    },
    data() {
        return {
            formInline: {
                expire_status: '',
                class_id: this.class_id,
                status: '',

            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10
            },
            total: 0,
            class_list: [],// 班级列表
            EXPIRE_STATUS_LIST,// 有效期列表
            EXPIRE_STATUS_MAP,
            status_list: [
                {
                    value: 0,
                    label: '未激活'
                }, {
                    value: 1,
                    label: '使用中'
                }],//学员状态
            loading: false,
            tableData: [],
            pageSizes,
            showForm: false,
            editId: 0,
            showAssign: false,
            assignItem: {},// 当前被分配的学员
            multipleSelection:[],
            showShift: false,
            shiftId: [],// 学员id 
            userType:2,  //1为教师  2为学生

            //添加学员
            showAddStudent:false,
            ids:[]
        }
    },
    created() {
        this.init()
    },
    methods: {
        getEndStatus,
        hasPermission,
        isShow,
        async init() {
            this.loading = true;
            let params = Object.assign({}, this.pageInfo, this.formInline);
            getClassData().then(res => {
                if (res.code === 200) {
                    this.class_list = res.data.list;
                }
            })
            const res = await getStudentList(params)
            if (res.code == 200) {
                this.tableData = res.data.data
                this.total = res.data.total
                this.pageInfo.pageSize = res.data.per_page
                this.pageInfo.pageNumber = res.data.current_page
                this.setIds(res.data.data)
            }
            this.$emit('handleReload');
            this.loading = false
        },
        setIds: function (arr) {
            this.ids=[];
            if(arr.length>0){
                for(let i=0;i<arr.length;i++){
                    this.ids.push(parseInt(arr[i].id));
                }
            }
            console.log(this.ids);
        },
        search: function () {
            this.init();
        },
        handleSizeChange() {
            this.init()
        },
        handleCurrentChange() {
            this.init()
        },
        add() {
            this.showAddStudent = true;
            //this.showForm = true
        },
        handleEdit({ user_id }) {
            this.editId = user_id
            this.showForm = true
        },

        handleAssign(row) {
            this.showAssign = true;
            this.assignItem = { ...row }
        },
        handleDetail({ user_id }) {
            this.$router.push({
                name: `DetailInfo`,
                query: { user_id }
            })
        },
        handleClickSelect(operType){
            console.log('student muti',this.multipleSelection);
            if(this.multipleSelection.length ==0){
                this.$message('请选择需要移出的学员');
                return false;
            }
            if(operType==1){
                //批量移出
                this.handleRemove('');
            }
            if(operType==2){
                //批量换班
                this.handleShift('');
            }
        },
        handleRemove(obj){
            if(obj){
                this.multipleSelection = [obj.id];
                console.log('student single',this.multipleSelection);
            }else{
                let arr_multi = this.multipleSelection;
                this.multipleSelection = [];
                for(let i=0;i < arr_multi.length;i++){
                    this.multipleSelection.push(arr_multi[i].id);
                }
                console.log('student multi id',this.multipleSelection);
            }

            this.$confirm('此操作会将所选成员移出该组且无法恢复\n' + '\n' + '确定要移出?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                studentRemove({student_ids:this.multipleSelection,class_id:this.class_id}).then((res) => {
                    console.log('student remove return',res);
                    if(res.code == 200){
                        this.$message({type: 'success', message: '移出成功!'});
                        this.init();
                    }else{
                        this.$message({type: 'warning', message: res.msg});
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        handleShift(obj){
            if(obj){
                this.shiftId = [obj.id];
                console.log('student single',this.shiftId);
            }else{
                let arr_multi = this.multipleSelection;
                this.multipleSelection = [];
                for(let i=0;i < arr_multi.length;i++){
                    this.multipleSelection.push(arr_multi[i].id);
                }
                this.shiftId = this.multipleSelection;
                console.log('student multi id',this.multipleSelection);
            }
            this.showShift = true;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 300px;
    }
}
</style>